<?
include_once "fbmain.php";
include_once "configuration.php";
include_once "common_functions.php";
include_once "function.js.php";?>

<style type="text/css">
    #tabs ul li{
        font-size: 80%;
    }
    #tabs pre{
        font-size: 138%;
    }
    #tabs{
        font-size: 70%;
    }
    #tabs div a{
        color: blue;
    }
</style>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>App Information</span></a></li>
        <li><a href="#fragment-2"><span>Create Your Own Video!</span></a></li>
        <li><a href="#fragment-3"><span>Publish Stream and Status Update</span></a></li>
	<li><a href="#fragment-4"><span>Invite People</span></a></li>
	<li><a href="#fragment-5"><span>About</span></a></li>
    </ul>
    <div id="fragment-1">
 	<br />
	This facebook app makes a <span style="font-weight: bold;">nice video out of
	your facebook photos!</span> It will get your picture from facebook,
	and render a video where the center of attention in the entire video is
	YOU!<br>
	<img src="VY_pic.jpg" alt="method" align="middle" vspace="1" hspace="3"/> <br />
	<br>
	<h3> <img src="http://graph.facebook.com/<?=$uid?>/picture" alt="user photo" align="middle" vspace="1" hspace="3"/>  <?php echo($fbme['first_name']); ?>, start making the video of yourself on the next tab!
	<br>
        <br />
    </div>
    <div id="fragment-2">
	<br />
        <div style="height: 400px; overflow: auto">
	This part will take some minutes... it depends how many images you have (on average, 8 minutes).<br> Selct your options and click on the button to start :)<br /><br />

	<form>
	 <fieldset>
	  <legend>Time</legend>
	  Chronologically<input type="radio" name="time" value="crono"/>
	  Random <input type="radio" name="time" value="random"/>
	</fieldset>
	</form>
	
        <button type="button" onclick="CallDoStuff1('<?echo serializeme($fbme)?>');this.disabled=false">Start!</button>
	<br><br>
<?//echo print_r(json_encode($fbme))?>
<?//echo serializeme($fbme)?>
	<div id="computationON" style="visibility:hidden">
		Computing... <img src="ajax-loader.gif" id="loaderImage" alt="ajax_loader.gif" style = "display: inline;" align="middle" name="waiting_icon" ><br>
	</div>


	<div id="step01" style="visibility: hidden;">Retrieving the pictures from your facebook account...</div>
	<div id="step02" style="visibility: hidden;">Analyzing your pictures...</div>
	<div id="step03" style="visibility: hidden;">Rendering the video...</div>

	<div id="myFinal" style="visibility: hidden;"><h3>Congratulations, <span style="font-weight: bold;">your video</span> is ready!</h3></div>
	<div id="myClick" style="visibility: hidden;"><h3>dear beta tester, the video is here (right click, save as) and better view on VLC: <br></h3></div>
        </div>
	
    </div>
    <div id="fragment-3">
	<br />
	What do you think about this app? Share the impressions in your profile:<br>
 	<br />
        <form name="statusUpdate" action="" method="">
            <textarea name="status" id="status" rows="4" cols="50"></textarea>
            <br />
            <!--<input type="button" onclick="updateStatus(); return false;" value="Update Status via AJAX And PHP API" />   -->
            <input type="button" onclick="updateStatusViaJavascriptAPICalling(); return false;" value="Update your status" />
        </form>
	<br />
	<a href="#" onclick="publishStream(); return false;">Or click here to post a message on your profile</a>
    </div>
    <div id="fragment-4">
	<br>
	<a href="<?=$fbconfig['appBaseUrl']?>/index.php?page=invite.php" target="_top">Invite more people to create their own videos</a>
	<br><br>
        <a href="#" onclick="newInvite(); return false;">New Invitation to a friend of you</a>
	</br>
    </div>
    <div id="fragment-5">
	<br>
	VideoYourself app, v. 0.1 beta<br>
	Creator: Riccardo M.<br>
	Last update: 18/04/11<br>
	Contact the developer on the link below
	<br>

	</br>
    </div>
</div>
